<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name: '管品'}">
        <span tag="i" class="rig_close fr" @click="$parent.$parent.fourClick()"></span>
    </three-title>
     <div class="layerRtb-scroll thinScroll" v-scrollHeight = "84">
       <div class="analyItem ">
        <p class="analyItemTit tx-center">管品</p>
        <div class="analyItemCon">
            <p class="fl col-md-6 mb10">
                <span class="cLightGray pr8">大标题</span>
                <span class="c999999"><input v-model="name" type="text" style="width: 75%;" name="saveAnswerProblem"></span>
            </p>
            <p class="fl col-md-6 mb10">
                <span class="cLightGray pr8">小标题</span>
                <span class="c999999"><input v-model="twoKey" type="text" style="width: 75%;" name="saveAnswerProblem"></span>
            </p>
            <p class="fl col-md-9 mb10">
                <span class="cLightGray pr8">内容</span>
                <span class="c999999"><textarea rows="2" v-model="twoValue" class="assessment-textarea" style="width: 75%;" name="saveAnswerSolution">
                </textarea></span>
            </p>
            <p class="fl col-md-3 mb10">
                <input @click="insertCharacter()" type="button" value="确定" class=" uiBtn-blue uiBtn-small" style="margin-top: 20px; margin-left: 30px;" name="saveAnswer"></p>
        </div>
    </div>
    <div class="analyItem" v-for="(item,index) in this.characters" :key="index">
        <!-- <div>{{item.two_key}}</div> -->
            <p class="analyItemTit tx-center">{{item.two_key}}</p>
        <div class="analyItemCon" v-if="flg==0 && Number(anId) === Number(item.id)">
            <!-- <p class="fl col-md-4 mb10">
                <span class="cLightGray pr8">大标题</span>
                <input type="text" class="anProblem" name="an_problem" style="width: 75%;" v-model="upName">
            </p> -->
            <p class="fl col-md-6 mb10">
                <span class="cLightGray pr8">小标题</span>
                <input type="text" class="anProblem" name="an_problem" style="width: 75%;" v-model="upTwoKey">
            </p>
            <p class="fl col-md-12 mb10">
                <span class="cLightGray pr8">内容</span>
                <textarea rows="2" class="assessment-textarea"  name="an_solution" style="width: 75%;" v-model="upValue"></textarea>
            </p>
            <div class="imgbox imgbox2 " style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/save_img.png" title="保存" width="20" class="fl pointer mr5" name="update_stage_info_intention" @click="updateCharacterById(item.id)">
                <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/goback_img.png" title="返回" width="20" class="fl pointer mr5" @click="flg=1">
            </div>
        </div>

        <div class="analyItemCon" v-else>
            <!-- <p class="fl col-md-9 mb10">
                <span class="cLightGray pr8">大标题</span> <span class="c999999">{{item.anProblem}}</span>
            </p> -->
            <!-- <p class="fl col-md-1 mb10">
                <span class="cLightGray pr8">小标题</span> <span class="c999999">{{item.two_key}}</span>
            </p> -->
            <p class="fl col-md-12 mb10">
                <span class="cLightGray pr8">内容</span> <span class="c999999">{{item.two_value}}</span>
            </p>
            <div class="imgbox imgbox1 col-md-2" style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                <img src="https://proj01.oss-cn-beijing.aliyuncs.com/worker/1582078336kn4XDPDSP0kpAj6YDzCNzzzd.png" title="删除" width="20" class="fr pointer mr5" @click="deleteCharacterById(item.id)">
                <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="updateFlg(item, flg)">
            </div>
        </div>
    </div>
    </div>

            <!-- <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">

            </div>
        </div> -->
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import { insertCharacter, getCharacterList, updateCharacterById, deleteCharacterById } from '../../../Resources/Api/index'
export default {
    data () {
        return {
            flg: 1,
            name: '',
            characters: [],
            twoValue: '',
            twoKey: '',
            upValue: '',
            upTwoKey: '',
            upName: '',
            anId: 0
        }
    },
    created () {
        this.getCharacterList()
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    methods: {
        // ...mapMutations({
        //     setUpdatePlate: `SET_UPDATE_PLATE`
        // }),
        deleteCharacterById (value) {
            deleteCharacterById({
                id: Number(value)
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('删除成功')
                    this.getCharacterList()
                }
            })
        },
        updateCharacterById (value) {
            updateCharacterById({
                id: Number(value),
                // name: this.name,
                twoKey: this.upTwoKey,
                twoValue: this.upValue
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('修改成功')
                    this.updateFlg('', 0)
                    this.getCharacterList()
                }
            })
        },
        updateFlg (value, upFlg) {
            // debugger
            if (Number(upFlg) === 1) {
                this.flg = 0
                this.anId = Number(value.id)
                this.upName = value.name
                this.upTwoKey = value.two_key
                this.upValue = value.two_value
            } else if (Number(upFlg) === 0) {
                this.flg = 1
                this.anId = 0
                this.upName = ''
                this.upTwoKey = ''
                this.upValue = ''
            }
        },
        getCharacterList () {
            getCharacterList({
                type: 2
            }).then(result => {
                // debugger
                if (Number(result.data.StatusCode) === 0) {
                    // debugger
                    this.characters = result.data.Body.characters
                    // console.log(this.characters)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        insertCharacter () {
            let type
            if (this.name === undefined || this.name === '' || this.name === null) {
                type = 2
                this.name = '管品'
            } else {
                type = 0
            }
            insertCharacter({
                type: type,
                // twoType: ,
                name: this.name, // 一级类型的名称
                twoKey: this.twoKey, // 二级类型的名称
                twoValue: this.twoValue // 二级类型的解释
            }).then(results => {
                if (results.data.StatusCode === 0) {
                    layer.msg('添加成功')
                    this.name = ''
                    this.twoKey = ''
                    this.twoValue = ''
                    this.getCharacterList()
                }
            }).catch(error => {
                console.log(error)
            })
        }
    },
    watch: {
        // leftInfo () {
        //     this.getAnswerList()
        // },
        // twoToThreeInfo () {
        //     this.getAnswerList()
        // }
    }
}
</script>

